<template>
  <el-card class="card-market">
    <h2>卡牌市场</h2>
    <el-form :inline="true" :model="search" class="search-form">
      <el-form-item label="编号">
        <el-input v-model="search.code" placeholder="卡牌编号" clearable />
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="search.name" placeholder="卡牌名称" clearable />
      </el-form-item>
      <el-form-item label="稀有度">
        <el-input v-model="search.rarity" placeholder="稀有度" clearable />
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="search.type" placeholder="全部类型" clearable style="width: 120px;">
          <el-option label="全部" value="" />
          <el-option label="怪兽" value="怪兽" />
          <el-option label="魔法" value="魔法" />
          <el-option label="陷阱" value="陷阱" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchCards">搜索</el-button>
      </el-form-item>
      <el-form-item label="排序">
        <el-select v-model="sortBy" style="width: 100px;">
          <el-option label="价格" value="price" />
          <el-option label="库存" value="quantity" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="order" style="width: 100px;">
          <el-option label="升序" value="asc" />
          <el-option label="降序" value="desc" />
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="sortedCards" v-loading="loading" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="code" label="编号" width="120" />
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column prop="rarity" label="稀有度" width="100" />
      <el-table-column prop="type" label="类型" width="100" />
      <el-table-column label="操作" width="100">
        <template #default="scope">
          <el-button size="small" @click="viewDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-empty v-if="!loading && cards.length === 0" description="暂无卡牌" />
    <el-alert v-if="msg" :title="msg" type="info" show-icon class="msg-alert" />
  </el-card>
</template>

<script setup>
import { ref, computed } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const cards = ref([])
const msg = ref('')
const loading = ref(false)
const search = ref({ code: '', name: '', rarity: '', type: '' })
const sortBy = ref('price')
const order = ref('asc')

const searchCards = async () => {
  loading.value = true
  try {
    const res = await axios.get('/card/search', { params: search.value })
    cards.value = res.data
    msg.value = ''
  } catch (e) {
    msg.value = e.response?.data?.detail || '搜索失败'
    ElMessage.error(msg.value)
  } finally {
    loading.value = false
  }
}

const sortedCards = computed(() => {
  return [...cards.value].sort((a, b) => {
    if (sortBy.value === 'price') return order.value === 'asc' ? (a.price || 0) - (b.price || 0) : (b.price || 0) - (a.price || 0)
    if (sortBy.value === 'quantity') return order.value === 'asc' ? (a.quantity || 0) - (b.quantity || 0) : (b.quantity || 0) - (a.quantity || 0)
    return 0
  })
})

const viewDetail = (card) => {
  // 跳转到卡牌详情页，实际项目可用router
  ElMessage.info('卡牌详情：' + card.name)
}

// 初始加载全部卡牌
searchCards()
</script>

<style scoped>
.card-market {
  max-width: 900px;
  margin: 40px auto;
  padding: 32px 24px;
  border-radius: 12px;
  background: #f8f9fa;
}
.search-form {
  margin-bottom: 12px;
}
.msg-alert {
  margin-top: 16px;
}
</style> 